<!-- pages/study-plan/study-plan.vue -->
<template>
  <view class="study-plan-container">
    <!-- AI 学习助手卡片 -->
    <view class="ai-assistant-card">
      <view class="ai-card-content">
        <view class="ai-avatar">
          <text class="ai-avatar-icon">🤖</text>
        </view>
        <view class="ai-message">
          <text class="ai-greeting">你好，{{ userName }}！</text>
          <text class="ai-tip">根据你的学习情况，今天建议你专注于 {{ todayFocus }}</text>
        </view>
      </view>
      <view class="ai-actions">
        <button class="ai-action-btn" @tap="generatePersonalizedPlan">
          <text class="btn-icon">✨</text>
          <text>个性化计划</text>
        </button>
        <button class="ai-action-btn" @tap="showAIAdvice">
          <text class="btn-icon">💡</text>
          <text>学习建议</text>
        </button>
      </view>
    </view>

    <!-- 学习进度概览 -->
    <view class="progress-overview">
      <view class="overview-header">
        <text class="section-title">备考进度</text>
        <text class="days-left">距离考试还有 {{ daysUntilExam }} 天</text>
      </view>
      
      <view class="progress-bars">
        <view v-for="(subject, index) in subjects" :key="index" class="subject-progress">
          <view class="subject-info">
            <text class="subject-name">{{ subject.name }}</text>
            <text class="progress-percent">{{ subject.progress }}%</text>
          </view>
          <view class="progress-bar-bg">
            <view class="progress-bar-fill" :style="{ width: subject.progress + '%', backgroundColor: subject.color }"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 今日计划 -->
    <view class="today-plan">
      <view class="section-header">
        <text class="section-title">今日计划</text>
        <view class="header-actions">
          <button class="add-plan-btn" @tap="showAddPlanModal">+ 添加计划</button>
          <text class="today-date">{{ currentDate }}</text>
        </view>
      </view>

      <view class="time-blocks">
        <view v-for="(block, index) in todaySchedule" :key="index" class="time-block" :class="{'completed': block.completed}">
          <view class="time-range">
            <text>{{ block.timeRange }}</text>
          </view>
          <view class="block-content">
            <view class="block-header">
              <text class="block-title">{{ block.title }}</text>
              <view class="block-tag" :style="{ backgroundColor: getSubjectColor(block.subject) }">{{ block.subject }}</view>
            </view>
            <text class="block-desc">{{ block.description }}</text>
            <view class="block-actions">
              <button class="small-btn" @tap="toggleCompleted(index)">{{ block.completed ? '已完成' : '标记完成' }}</button>
              <button class="small-btn outline" @tap="showTaskDetail(block)">查看详情</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 备考周计划 -->
    <view class="weekly-plan">
      <view class="section-header">
        <text class="section-title">周计划预览</text>
        <button class="view-all-btn" @tap="navigateToWeekView">查看完整周计划</button>
      </view>

      <scroll-view scroll-x class="week-scroll">
        <view class="week-days">
          <view v-for="(day, index) in weekDays" :key="index" class="day-card" :class="{'current-day': day.isToday}">
            <text class="day-name">{{ day.name }}</text>
            <text class="day-date">{{ day.date }}</text>
            <view class="day-subjects">
              <view v-for="(subject, sIndex) in day.subjects" :key="sIndex" class="day-subject-tag" :style="{ backgroundColor: getSubjectColor(subject) }">
                {{ subject }}
              </view>
            </view>
            <text class="task-count">{{ day.taskCount }}个任务</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- AI 学习建议弹窗 -->
    <view class="modal" v-if="showAdviceModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">AI学习建议</text>
          <text class="modal-close" @tap="showAdviceModal = false">×</text>
        </view>
        <view class="modal-body">
          <view class="advice-item" v-for="(advice, index) in aiAdvice" :key="index">
            <view class="advice-icon" :class="advice.type">
              <text>{{ getAdviceIcon(advice.type) }}</text>
            </view>
            <view class="advice-content">
              <text class="advice-title">{{ advice.title }}</text>
              <text class="advice-desc">{{ advice.description }}</text>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn primary" @tap="applyAdvice">应用到计划</button>
          <button class="modal-btn" @tap="showAdviceModal = false">稍后再说</button>
        </view>
      </view>
    </view>

    <!-- 添加学习计划弹窗 -->
    <view class="modal" v-if="showAddPlanModal">
      <view class="modal-content add-plan-modal">
        <view class="modal-header">
          <text class="modal-title">添加学习计划</text>
          <text class="modal-close" @tap="showAddPlanModal = false">×</text>
        </view>
        <view class="modal-body">
          <view class="form-group">
            <text class="form-label">时间段</text>
            <view class="time-input-group">
              <input type="text" class="form-input time-input" v-model="newPlan.startTime" placeholder="开始时间 (HH:MM)" />
              <text class="time-separator">-</text>
              <input type="text" class="form-input time-input" v-model="newPlan.endTime" placeholder="结束时间 (HH:MM)" />
            </view>
          </view>
          
          <view class="form-group">
            <text class="form-label">标题</text>
            <input type="text" class="form-input" v-model="newPlan.title" placeholder="例如：高数习题演练" />
          </view>
          
          <view class="form-group">
            <text class="form-label">学科</text>
            <picker class="form-picker" @change="onSubjectChange" :value="subjectIndex" :range="subjectOptions">
              <view class="picker-value">
                <text>{{ subjectOptions[subjectIndex] }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <view class="form-group">
            <text class="form-label">描述</text>
            <textarea class="form-textarea" v-model="newPlan.description" placeholder="详细描述你的学习计划内容..." />
          </view>

          <view class="form-group">
            <text class="form-label">优先级</text>
            <view class="priority-options">
              <view 
                v-for="(priority, index) in priorities" 
                :key="index" 
                class="priority-option" 
                :class="{'selected': newPlan.priority === priority.value}"
                @tap="newPlan.priority = priority.value"
              >
                <text>{{ priority.label }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @tap="showAddPlanModal = false">取消</button>
          <button class="modal-btn primary" @tap="addNewPlan">确认添加</button>
        </view>
      </view>
    </view>

    <!-- 底部标签栏 -->
    <view class="tabbar">
      <view class="tab-item">
        <text class="tab-icon">📊</text>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">📝</text>
        <text class="tab-text">练习</text>
      </view>
      <view class="tab-item">
        <text class="tab-icon">👥</text>
        <text class="tab-text">社区</text>
      </view>
      <view class="tab-item active">
        <text class="tab-icon">👤</text>
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 用户信息
const userName = ref('考研学霸');

// 距离考试时间
const daysUntilExam = ref(125);

// 当天重点学习内容
const todayFocus = ref('政治模拟题演练和数学高频考点');

// 显示AI建议的模态框
const showAdviceModal = ref(false);

// 显示添加计划的模态框
const showAddPlanModal = ref(false);

// 日期格式化
const currentDate = computed(() => {
  const now = new Date();
  return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
});

// 学科及进度数据
const subjects = ref([
  { name: '政治', progress: 65, color: '#A8BF8F' },
  { name: '英语', progress: 58, color: '#7C9ECE' },
  { name: '数学', progress: 42, color: '#E8B0A2' },
  { name: '专业课', progress: 70, color: '#E6A5DC' }
]);

// 今日学习计划
const todaySchedule = ref([
  {
    timeRange: '08:00 - 10:00',
    title: '政治知识点复习',
    subject: '政治',
    description: '马原部分重点知识点梳理，结合近年真题',
    completed: true,
    priority: 'medium'
  },
  {
    timeRange: '10:30 - 12:00',
    title: '英语阅读理解',
    subject: '英语',
    description: '考研英语阅读理解5篇，重点分析长难句',
    completed: false,
    priority: 'high'
  },
  {
    timeRange: '14:00 - 16:30',
    title: '高数习题演练',
    subject: '数学',
    description: '微分方程相关习题，重点突破难点题型',
    completed: false,
    priority: 'high'
  },
  {
    timeRange: '17:00 - 18:30',
    title: '专业课文献阅读',
    subject: '专业课',
    description: '阅读3篇学术论文，做好知识点摘要',
    completed: false,
    priority: 'medium'
  },
  {
    timeRange: '19:30 - 21:30',
    title: '政治模拟题演练',
    subject: '政治',
    description: '完成一套政治模拟题，重点练习分析题',
    completed: false,
    priority: 'medium'
  }
]);

// 周计划概览
const weekDays = ref([
  {
    name: '周一',
    date: '4/8',
    isToday: false,
    subjects: ['政治', '数学'],
    taskCount: 5
  },
  {
    name: '周二',
    date: '4/9',
    isToday: true,
    subjects: ['政治', '英语', '数学', '专业课'],
    taskCount: 5
  },
  {
    name: '周三',
    date: '4/10',
    isToday: false,
    subjects: ['英语', '专业课'],
    taskCount: 4
  },
  {
    name: '周四',
    date: '4/11',
    isToday: false,
    subjects: ['政治', '数学'],
    taskCount: 4
  },
  {
    name: '周五',
    date: '4/12',
    isToday: false,
    subjects: ['英语', '专业课'],
    taskCount: 3
  },
  {
    name: '周六',
    date: '4/13',
    isToday: false,
    subjects: ['政治', '数学', '英语'],
    taskCount: 6
  },
  {
    name: '周日',
    date: '4/14',
    isToday: false,
    subjects: ['专业课', '模拟考'],
    taskCount: 3
  }
]);

// AI学习建议
const aiAdvice = ref([
  {
    type: 'strength',
    title: '政治题型分析',
    description: '你在政治选择题上的正确率较高，但分析题得分率偏低。建议增加分析题的专项训练，掌握答题技巧和框架。'
  },
  {
    type: 'weakness',
    title: '数学薄弱点',
    description: '线性代数部分正确率低于平均水平，需要加强练习，特别是特征值和矩阵相关的题型。'
  },
  {
    type: 'suggestion',
    title: '学习时间优化',
    description: '根据你的学习数据，上午9-11点是你的高效学习时段，建议安排较难的数学和专业课在此时间段。'
  },
  {
    type: 'adjustment',
    title: '英语学习调整',
    description: '建议增加英语阅读量，每天至少精读1篇文章，泛读2篇，重点提高长难句理解能力。'
  }
]);

// 新计划的表单数据
const newPlan = ref({
  startTime: '',
  endTime: '',
  title: '',
  subject: '政治',
  description: '',
  priority: 'medium'
});

// 科目选择器
const subjectOptions = ['政治', '英语', '数学', '专业课', '模拟考'];
const subjectIndex = ref(0);

// 优先级选项
const priorities = [
  { label: '低', value: 'low' },
  { label: '中', value: 'medium' },
  { label: '高', value: 'high' }
];

// 科目选择变化处理
const onSubjectChange = (e) => {
  subjectIndex.value = e.detail.value;
  newPlan.value.subject = subjectOptions[subjectIndex.value];
};

// 获取学科对应的颜色
const getSubjectColor = (subject) => {
  const subjectColors = {
    '政治': '#A8BF8F',
    '英语': '#7C9ECE',
    '数学': '#E8B0A2',
    '专业课': '#E6A5DC',
    '模拟考': '#94D0CC'
  };
  return subjectColors[subject] || '#A8BF8F';
};

// 获取建议类型对应的图标
const getAdviceIcon = (type) => {
  const icons = {
    'strength': '💪',
    'weakness': '⚠️',
    'suggestion': '💡',
    'adjustment': '🔄'
  };
  return icons[type] || '💡';
};

// 标记任务完成/未完成
const toggleCompleted = (index) => {
  todaySchedule.value[index].completed = !todaySchedule.value[index].completed;
};

// 显示任务详情
const showTaskDetail = (task) => {
  uni.showModal({
    title: task.title,
    content: `${task.timeRange}\n${task.description}\n\n完成后可获得学习积分：25分`,
    showCancel: false,
    confirmText: '关闭'
  });
};

// 显示AI建议
const showAIAdvice = () => {
  showAdviceModal.value = true;
};

// 应用AI建议
const applyAdvice = () => {
  showAdviceModal.value = false;
  uni.showToast({
    title: '已将建议应用到学习计划',
    icon: 'success'
  });
};

// 添加新计划
const addNewPlan = () => {
  // 表单验证
  if (!newPlan.value.startTime || !newPlan.value.endTime || !newPlan.value.title) {
    uni.showToast({
      title: '请填写完整的计划信息',
      icon: 'none'
    });
    return;
  }
  
  // 创建新计划
  const timeRange = `${newPlan.value.startTime} - ${newPlan.value.endTime}`;
  
  todaySchedule.value.push({
    timeRange: timeRange,
    title: newPlan.value.title,
    subject: newPlan.value.subject,
    description: newPlan.value.description || '暂无详细描述',
    completed: false,
    priority: newPlan.value.priority
  });
  
  // 重新按时间排序
  todaySchedule.value.sort((a, b) => {
    const timeA = a.timeRange.split(' - ')[0];
    const timeB = b.timeRange.split(' - ')[0];
    return timeA.localeCompare(timeB);
  });
  
  // 关闭弹窗并重置表单
  showAddPlanModal.value = false;
  resetNewPlanForm();
  
  uni.showToast({
    title: '学习计划已添加',
    icon: 'success'
  });
};

// 重置新计划表单
const resetNewPlanForm = () => {
  newPlan.value = {
    startTime: '',
    endTime: '',
    title: '',
    subject: '政治',
    description: '',
    priority: 'medium'
  };
  subjectIndex.value = 0;
};

// 生成个性化计划
const generatePersonalizedPlan = () => {
  uni.showLoading({
    title: 'AI分析中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showModal({
      title: '个性化学习计划已生成',
      content: '基于你的学习情况和目标院校要求，AI已为你制定专属学习计划，重点强化数学和政治分析题能力。是否查看详情？',
      confirmText: '查看详情',
      cancelText: '稍后查看',
      success: (res) => {
        if (res.confirm) {
          // 这里可以跳转到详细计划页面
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          });
        }
      }
    });
  }, 1500);
};

// 导航到周计划页面
const navigateToWeekView = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  });
};

onMounted(() => {
  // 页面加载时可以进行的初始化操作
  uni.setNavigationBarTitle({
    title: '学习计划'
  });
});
</script>

<style>
.study-plan-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.header-bar {
  background-color: #A8BF8F;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.page-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
}

/* AI助手卡片 */
.ai-assistant-card {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.ai-card-content {
  display: flex;
  margin-bottom: 20rpx;
}

.ai-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #E6F3E9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.ai-avatar-icon {
  font-size: 40rpx;
}

.ai-message {
  flex: 1;
}

.ai-greeting {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.ai-tip {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.ai-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.ai-action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #F0F7F0;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.ai-action-btn:first-child {
  margin-left: 0;
}

.ai-action-btn:last-child {
  margin-right: 0;
}

.btn-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

/* 学习进度概览 */
.progress-overview {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.days-left {
  font-size: 26rpx;
  color: #ff6b6b;
  background-color: #FFF5F5;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.progress-bars {
  margin-top: 20rpx;
}

.subject-progress {
  margin-bottom: 20rpx;
}

.subject-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.subject-name {
  font-size: 28rpx;
  color: #333;
}

.progress-percent {
  font-size: 28rpx;
  color: #666;
}

.progress-bar-bg {
  height: 16rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 8rpx;
}

/* 今日计划 */
.today-plan {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.add-plan-btn {
  font-size: 26rpx;
  color: #fff;
  background-color: #A8BF8F;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
}

.today-date {
  font-size: 26rpx;
  color: #666;
}

.time-blocks {
  margin-top: 20rpx;
}

.time-block {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
}

.time-block:last-child {
  margin-bottom: 0;
}

.time-block::before {
  content: '';
  position: absolute;
  left: 65rpx;
  top: 60rpx;
  bottom: -30rpx;
  width: 2rpx;
  background-color: #e0e0e0;
  z-index: 1;
}

.time-block:last-child::before {
  display: none;
}

.time-range {
  width: 130rpx;
  font-size: 24rpx;
  color: #666;
  padding-top: 10rpx;
}

.block-content {
  flex: 1;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 20rpx;
}

.time-block.completed .block-content {
  border-left: 6rpx solid #A8BF8F;
  opacity: 0.7;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.block-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.block-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  color: #fff;
  font-size: 22rpx;
}

.block-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.block-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}

.small-btn {
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
  background-color: #A8BF8F;
  color: white;
  line-height: 1.5;
  min-width: 90rpx;
}

.small-btn.outline {
  background-color: transparent;
  color: #A8BF8F;
  border: 1rpx solid #A8BF8F;
}

/* 周计划预览 */
.weekly-plan {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.view-all-btn {
  font-size: 26rpx;
  color: #A8BF8F;
  background: none;
  padding: 0;
}

.week-scroll {
  margin-top: 20rpx;
}

.week-days {
  display: flex;
  padding-bottom: 20rpx;
}

.day-card {
  min-width: 180rpx;
  height: 200rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  margin-right: 20rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
}

.day-card.current-day {
  background-color: #E6F3E9;
  border: 1rpx solid #A8BF8F;
}

.day-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.day-date {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.day-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
  flex: 1;
}

.day-subject-tag {
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  color: #fff;
  font-size: 20rpx;
}

.task-count {
  font-size: 24rpx;
  color: #666;
}

/* AI建议弹窗 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 650rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
  max-height: 700rpx;
  overflow-y: auto;
}

.advice-item {
  display: flex;
  margin-bottom: 30rpx;
}

.advice-item:last-child {
  margin-bottom: 0;
}

.advice-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  font-size: 36rpx;
}

.advice-icon.strength {
  background-color: #E6F3E9;
}

.advice-icon.weakness {
  background-color: #FFF1F0;
}

.advice-icon.suggestion {
  background-color: #FFF8E6;
}

.advice-icon.adjustment {
  background-color: #EFF8FF;
}

.advice-content {
  flex: 1;
}

.advice-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.advice-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.modal-footer {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.modal-btn.primary {
  background-color: #A8BF8F;
  color: white;
}

/* 添加学习计划表单样式 */
.add-plan-modal {
  width: 700rpx;
}

.form-group {
  margin-bottom: 24rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.time-input-group {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.time-input {
  flex: 1;
}

.time-separator {
  font-size: 28rpx;
  color: #666;
}

.form-textarea {
  width: 100%;
  height: 160rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.picker-value {
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

.priority-options {
  display: flex;
  gap: 20rpx;
}

.priority-option {
  flex: 1;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666;
}

.priority-option.selected {
  background-color: #A8BF8F;
  color: white;
}

/* 底部标签栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab-icon {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}

.tab-text {
  font-size: 22rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #A8BF8F;
  font-weight: bold;
}
</style>